import React, { Component } from 'react'
import { Menu } from 'antd';
import menuList from "../config/menuConfig"
import storageUtils from '../utils/storageUtils';
import {
    HomeOutlined,
    DesktopOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
    AreaChartOutlined

} from '@ant-design/icons';
// 使用iconfont字体图标库
import { createFromIconfontCN } from '@ant-design/icons';


import { Link } from 'react-router-dom';
const { SubMenu } = Menu;
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1977178_wp47fczwl6p.js',
});


export default class Menus extends Component {

    initMenus = (list) => {
        const userMenus = storageUtils.getStorage("userInfo").role.menus;
        return list.map(item => {
            if (userMenus.indexOf(item.key) != -1) {
                if (!item.children) {
                    return (
                        <Menu.Item key={item.key}>
                            <IconFont type={item.icon} />
                            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                            <Link to={item.key}>{item.title}</Link>
                        </Menu.Item>
                    )
                } else {
                    return (
                        <SubMenu key={item.key} title={item.title} icon={<IconFont type={item.icon} />}>
                            {this.initMenus(item.children)}
                        </SubMenu>
                    )
                }
            }
        })
    }


    get collapsed() {
        return this.props.collapsed
    }
    render() {

        return (
            <>
                <div className={this.collapsed ? 'logo' : 'logo_mini'}>商城管理系统</div>
                <Menu theme="dark" defaultSelectedKeys={['/home']} mode="inline">
                    {this.initMenus(menuList)}
                    {/* <Menu.Item key="/home" icon={<HomeOutlined />}>
                        <Link to='/home'>首页</Link>
                    </Menu.Item>
                    <Menu.Item key="/home/user" icon={<UserOutlined />}>
                        <Link to='/home/user'>用户管理</Link>
                    </Menu.Item>
                    <Menu.Item key="/home/shop" icon={<FileOutlined />}>
                        <Link to='/home/shop'>店铺管理</Link>

                    </Menu.Item>
                    <Menu.Item key="/home/role" icon={<TeamOutlined />}>
                        <Link to='/home/role'>角色权限</Link>

                    </Menu.Item>
                    <SubMenu key="sub1" icon={<DesktopOutlined />} title="商品管理">
                        <Menu.Item key="/home/product/list">
                            <Link to='/home/product/list'>商品列表</Link>
                        </Menu.Item>
                        <Menu.Item key="/home/product/category">
                            <Link to='/home/product/category'>商品分类</Link>

                        </Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" icon={<AreaChartOutlined />} title="财务管理">
                        <Menu.Item key="/home/datav/flowers">
                            <Link to='/home/datav/flowers'> 流水信息</Link>

                        </Menu.Item>
                        <Menu.Item key="/home/datav/sale">
                            <Link to='/home/datav/sale'> 销售数据</Link>

                        </Menu.Item>
                    </SubMenu> */}

                </Menu>
            </>
        )
    }
}
